<template>
    <n-drawer v-model:show="isDrawer" width="650" :auto-focus="false" @after-leave="handleReset">
      <n-drawer-content title="加盟合作" closable>
        <n-form
          :model="formParams"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="序号" path="id">
            <n-input
              placeholder=""
              v-model:value="formParams.id"
              disabled
            />
          </n-form-item>
          <n-form-item label="姓名" path="name">
            <n-input
              placeholder=""
              v-model:value="formParams.name"
              disabled
            />
          </n-form-item>
          <n-form-item label="手机号" path="tell">
            <n-input
              placeholder=""
              v-model:value="formParams.tell"
              disabled
            />
          </n-form-item>
          <n-form-item label="属性" path="attr">
            <n-radio-group v-model:value="formParams.attr" name="attr">
              <n-space>
                <n-radio :key="1" :value="1" disabled="false">代理</n-radio>
                <n-radio :key="2" :value="2" disabled="false">商家</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="处理状态" path="status">
            <n-radio-group v-model:value="formParams.status" name="status">
              <n-space>
                <n-radio :key="0" :value="0">未处理</n-radio>
                <n-radio :key="1" :value="1">已处理</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </template>
  
  <script lang="ts" setup>
    import { ref } from 'vue';
    import { useMessage } from 'naive-ui';
    import { info,edit } from '@/api/joinus/index';

    const defaultValueRef = () => ({
      id: null,
      name: '',
      tell: '',
      attr: '',
      status: '',
    });
  
    const message = useMessage();
    const formRef: any = ref(null);
    const isDrawer = ref(false);
    const subLoading = ref(false);
    const formParams = ref(defaultValueRef());
    const emit = defineEmits(['change']);

    async function openDrawer(id?) {
      if (id) {
        formParams.value.id = id;
        getInfo();
        return;
      }
      isDrawer.value = true;
    }
  
    function closeDrawer() {
      isDrawer.value = false;
    }
  
    function formSubmit() {
      formRef.value.validate((errors) => {
        if (!errors) {
          const msg = formParams.value.id ? '编辑成功' : '添加成功';
          if (formParams.value.id) {
            edit(formParams.value).then((_) => {
              message.success(msg);
              emit('change');
              handleReset();
              closeDrawer();
            });
          }
        } else {
          message.error('请填写完整信息');
        }
      });
    }
  
    function handleReset() {
      formRef.value.restoreValidation();
      formParams.value = Object.assign(formParams.value, defaultValueRef());
    }
  
    function getInfo() {
      info({ id: formParams.value.id }).then((res) => {
        const params = {
          id: formParams.value.id,
          name: res.name,
          tell: res.tell,
          attr: res.attr,
          status: res.status,
        };
        formParams.value = Object.assign(formParams.value, params);
        isDrawer.value = true;
      });
    }
  
    defineExpose({
      openDrawer,
      closeDrawer,
    });
  </script>
  